<script setup lang="ts">
import { ref, computed, defineExpose } from "vue";
import { useDark, useECharts } from "@pureadmin/utils";
import { MapChart } from "echarts/charts";
import { mapList } from "@/api/welcome";
import * as chinaArea from "@esmjs/geo";
import mapAll from "../100000_full.json";
console.log(chinaArea);
// if (chinaArea["china"]) {
//   chinaArea["china"]["features"][20].geometry.coordinates.splice(0, 133);
//   console.log(chinaArea["china"]["features"][20].geometry.coordinates);
// }
// chinaArea['china']['features'].geometry.coordinates.splice(-30,30)

import { mapListArr } from "./china";
// 兼容dark主题
const { isDark } = useDark();
let theme = computed(() => {
  return isDark.value ? "dark" : "default";
});
// 初始化ECharts
const chartRef = ref();
const { echarts, setOptions } = useECharts(chartRef, {
  theme
});
echarts.use([MapChart]);
const total = ref(0);
const renderEcharts = code => {
  const name = mapListArr[code || "china"];
  let geoJSON = chinaArea[name];

  let seriesData = [];
  for (let index = 0; index < geoJSON.features.length; index++) {
    const element = geoJSON.features[index];
    seriesData.push({
      name: element.properties.name,
      value: parseInt(Math.random() * 1000)
    });
  }
  total.value = seriesData.reduce((a, b) => a + b.value, 0);
  const minMax = seriesData.map(item => item.value);
  echarts.registerMap(name, {
    geoJSON
  });
  setOptions({
    visualMap: {
      type: "continuous",
      calculable: true,
      left: "left",
      top: "bottom",
      max: Math.max(...minMax),
      min: Math.min(...minMax),
      text: ["最大数量", "最小数量"]
      // color: ["#ff3333", "orange", "yellow", "lime", "aqua"]
    },
    tooltip: {
      trigger: "item",
      formatter: function (params) {
        var toolTiphtml = `${params.name}<br>
          组织数量：${params.value}个
        `;
        return toolTiphtml;
      }
    },
    series: [
      {
        name: "地图",
        type: "map",
        map: name,
        layoutCenter: name == "china" ? ["50%", "65%"] : ["50%", "50%"],
        layoutSize: name == "china" ? 400 : 250,
        roam: true, //是否可缩放
        zoom: 1.6, //缩放比例
        data: seriesData
      }
    ]
  });
};
renderEcharts("100000");
defineExpose({
  renderEcharts,
  total
});
</script>

<template>
  <div ref="chartRef" style="width: 100%; height: 500px" />
</template>

<style lang="scss" scoped></style>
